<script setup lang="ts">
import { ElMessage, type FormRules } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'
import { knowledgeAll } from '@/api/interface/web/knowledge'

interface Props {
  data?: Record<string, any> | never | null
  status?: string | never | null
}

const { data = null } = defineProps<Props>()

const baseFormRef = ref()

const form = ref<Record<string, any>>({})

const rules = reactive<FormRules>({
  name: [{ required: true, message: '文档名称不能为空!', trigger: 'blur' }],
  knowledgeId: [{ required: true, message: '知识库不能为空!', trigger: 'blur' }],
})

const knowledgeOpts = ref<any[]>([])

const getOptions = () => {
  knowledgeAll({}).then((res: any) => {
    knowledgeOpts.value = res.map((item: any) => {
      return {
        label: item.name,
        value: item.id + '',
      }
    })

    console.log(knowledgeOpts.value)
  })
}
getOptions()

const initForm = () => {
  if (data) {
    Object.keys(data).forEach((key: string) => {
      if (key == 'roles') {
        form.value.roleid = data![key][0].id
      } else {
        form.value[key] = data![key]
      }
    })
  }
}

const uploadRef = ref()

const fileList: any = ref([])

//超出限制
const limitFun = () => {
  ElMessage.error('最多上传1张!')
}

watch(fileList, () => {
  if (fileList.value && fileList.value.length) {
    form.value.name = fileList.value[0].name
  }
})

const formatForm = () => {
  const result: Record<string, any> = {
    fileList: fileList.value,
  }
  Object.keys(form.value).forEach((key: string) => {
    result[key] = form.value[key]
  })
  return result
}

const submitForm = () => {
  return baseFormRef.value.submit(formatForm)
}

defineExpose({
  submitForm,
})

onMounted(() => {
  initForm()
})
</script>

<template>
  <BaseForm ref="baseFormRef" :form="form" :rules="rules" :attributes="{ 'label-width': '100px' }">
    <el-form-item label="文档名称:" prop="name">
      <el-input
        v-model="form.name"
        type="text"
        placeholder="请输入内容"
        maxlength="50"
        show-word-limit
      >
      </el-input>
    </el-form-item>

    <el-form-item label="知识库:" prop="knowledgeId">
      <el-select v-model="form.knowledgeId" placeholder="知识库" style="width: 100%">
        <el-option
          v-for="item in knowledgeOpts"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="文件:" prop="fileUrl">
      <el-upload
        ref="uploadRef"
        v-model:file-list="fileList"
        accept=".txt,.md,.json,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.csv,.html,.htm"
        :limit="1"
        :on-exceed="limitFun"
        :auto-upload="false"
      >
        <el-button type="primary">点击上传</el-button>
        <template #tip>
          <div class="el-upload__tip">
            .txt,.md,.json,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.csv,.html,.htm 文件大小不超过
            500KB.
          </div>
        </template>
      </el-upload>
    </el-form-item>
  </BaseForm>
</template>

<style lang="scss" scoped></style>
